Shadcn UI Theme Variables Implementation from Design System #1217
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Overview This PR implements the design system's color palette and theme variables into the Shadcn UI configuration, ensuring consistent styling across the documentation site. Key Changes 1. Theme Variables Implementation src/css/custom.css: Added design system color variables for both light and dark themes Implemented proper HSL color values for all Shadcn UI components Added smooth transitions between theme states Configured proper color contrast ratios 2. Color Palette Integration Apply to custom.css } 3. Component Updates src/components/ui/button.jsx: Updated to use new theme variables Ensured proper color application across variants Added smooth transitions for state changes src/components/ui/theme-switcher.jsx: Updated to handle new theme variables Improved theme transition handling Added proper icon color transitions Testing Instructions Theme Variables: Verify all color variables match design system Check color contrast ratios Test transitions between themes Component Styling: Verify components use correct theme variables Check hover and active states Test in both light and dark modes Accessibility: Verify proper color contrast Test focus states Check text readability Review Checklist [ ] Verify all color variables match design system [ ] Test color transitions between themes [ ] Check component styling in both themes [ ] Verify accessibility standards [ ] Test responsive behavior [ ] Ensure consistent color application
✅ Deploy Preview for snowplow-docs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
mscwilson
approved these changes
May 8, 2025
* Enrich 5.3.0
* Document JS element tracking plugin * Move element tracking examples higher * Vale lint
* Rename ID service to Cookie Extension service * Rename "ID Service" to "Cookie Extension Service" in GTM (#1226) --------- Co-authored-by: Greg Leonard <45019882+greg-el@users.noreply.github.com>
* Remove the old feedback widget * Add product fruits package * Add netlify function * Add Product Fruits to Root * Update yarn.lock
Add missing .md filenames
* Document PHP tracker Server Anonymization support Added in 0.9.1 * Bump PHP tracker version 0.8.0 > 0.9.2 * Vale lint fixes * Remove title casing for 'debug mode' Co-authored-by: Miranda Wilson <miranda@snowplow.io> --------- Co-authored-by: Miranda Wilson <miranda@snowplow.io>
Co-authored-by: agnessnowplow <95634439+agnessnowplow@users.noreply.github.com>
There is no `job title` in the example schema. I propose changing it to an existing field.
…ed Font Fallbacks (#1220) Overview This PR consolidates all font family declarations into a single source of truth (custom.css), optimizes the heading hierarchy for better content scanning, and implements improved system font fallbacks for better performance and reliability, using Inter as the standard font per the design system. Key Changes 1. Font Consolidation src/css/custom.css: Centralized all font face declarations Removed duplicate font family declarations Established single source of truth for typography Apply to custom.css } 2. Improved Font Fallbacks Enhanced System Font Stack: Apply to custom.css } Added modern system font stack Improved cross-platform consistency Enhanced performance during font loading 3. Heading Hierarchy Optimization Improved Visual Hierarchy: Apply to custom.css } Increased size difference between h1, h2, and h3 Improved line heights for better readability Enhanced visual scanning of content structure 4. Font Family Cleanup Removed font family declarations from: Individual component files Inline styles Component-specific CSS Theme configuration files Testing Instructions Font Consistency: Verify all text uses Inter font Check for any remaining inline font declarations Test font loading across all pages Font Fallbacks: Test with Inter font disabled Verify system font fallbacks on different platforms Check font rendering across browsers Heading Hierarchy: Verify clear visual distinction between heading levels Check content scanning experience Test responsive behavior of heading sizes Performance: Verify font loading optimization Check for any duplicate font declarations Test page load performance Review Checklist [ ] Verify all font declarations are removed from components [ ] Test font fallbacks across different platforms [ ] Check heading size hierarchy across all pages [ ] Verify content scanning experience [ ] Test responsive behavior [ ] Check accessibility standards [ ] Verify page load performance
Overview This PR implements the design system's color palette and theme variables into the Shadcn UI configuration, ensuring consistent styling across the documentation site. Key Changes 1. Theme Variables Implementation src/css/custom.css: Added design system color variables for both light and dark themes Implemented proper HSL color values for all Shadcn UI components Added smooth transitions between theme states Configured proper color contrast ratios 2. Color Palette Integration Apply to custom.css } 3. Component Updates src/components/ui/button.jsx: Updated to use new theme variables Ensured proper color application across variants Added smooth transitions for state changes src/components/ui/theme-switcher.jsx: Updated to handle new theme variables Improved theme transition handling Added proper icon color transitions Testing Instructions Theme Variables: Verify all color variables match design system Check color contrast ratios Test transitions between themes Component Styling: Verify components use correct theme variables Check hover and active states Test in both light and dark modes Accessibility: Verify proper color contrast Test focus states Check text readability Review Checklist [ ] Verify all color variables match design system [ ] Test color transitions between themes [ ] Check component styling in both themes [ ] Verify accessibility standards [ ] Test responsive behavior [ ] Ensure consistent color application
pif
pushed a commit
that referenced
this pull request
Jun 11, 2025
* Shadcn UI Theme Variables Implementation from Design System Overview This PR implements the design system's color palette and theme variables into the Shadcn UI configuration, ensuring consistent styling across the documentation site. Key Changes 1. Theme Variables Implementation src/css/custom.css: Added design system color variables for both light and dark themes Implemented proper HSL color values for all Shadcn UI components Added smooth transitions between theme states Configured proper color contrast ratios 2. Color Palette Integration Apply to custom.css } 3. Component Updates src/components/ui/button.jsx: Updated to use new theme variables Ensured proper color application across variants Added smooth transitions for state changes src/components/ui/theme-switcher.jsx: Updated to handle new theme variables Improved theme transition handling Added proper icon color transitions Testing Instructions Theme Variables: Verify all color variables match design system Check color contrast ratios Test transitions between themes Component Styling: Verify components use correct theme variables Check hover and active states Test in both light and dark modes Accessibility: Verify proper color contrast Test focus states Check text readability Review Checklist [ ] Verify all color variables match design system [ ] Test color transitions between themes [ ] Check component styling in both themes [ ] Verify accessibility standards [ ] Test responsive behavior [ ] Ensure consistent color application * Release Attribution version 0.5.0 (#1215) * Enrich 5.3.0 (#1173) * Enrich 5.3.0 * [create-pull-request] automated change (#1221) * Upgrade iglu server to 0.14.1 (#1223) * Document JS element tracking plugin (#1224) * Document JS element tracking plugin * Move element tracking examples higher * Vale lint * Add Bigquery support to the Data Quality Dashboard (#1228) * Rename ID service to Cookie Extension service (#1219) * Rename ID service to Cookie Extension service * Rename "ID Service" to "Cookie Extension Service" in GTM (#1226) --------- Co-authored-by: Greg Leonard <45019882+greg-el@users.noreply.github.com> * Add lake loader 0.6.3 & Mini 0.23.0 (#1231) * Add Product Fruits (#1181) * Remove the old feedback widget * Add product fruits package * Add netlify function * Add Product Fruits to Root * Update yarn.lock * Fix local link references (#1227) Add missing .md filenames * Document Server Anonymization in PHP tracker (#1216) * Document PHP tracker Server Anonymization support Added in 0.9.1 * Bump PHP tracker version 0.8.0 > 0.9.2 * Vale lint fixes * Remove title casing for 'debug mode' Co-authored-by: Miranda Wilson <miranda@snowplow.io> --------- Co-authored-by: Miranda Wilson <miranda@snowplow.io> * US spelling (colour > color) (#1234) * Clarification for Event Specifications plugin (#1235) * [create-pull-request] automated change (#1236) Co-authored-by: agnessnowplow <95634439+agnessnowplow@users.noreply.github.com> * Update index.md (#1230) There is no `job title` in the example schema. I propose changing it to an existing field. * Font System Consolidation, Heading Hierarchy Optimization, and Improved Font Fallbacks (#1220) Overview This PR consolidates all font family declarations into a single source of truth (custom.css), optimizes the heading hierarchy for better content scanning, and implements improved system font fallbacks for better performance and reliability, using Inter as the standard font per the design system. Key Changes 1. Font Consolidation src/css/custom.css: Centralized all font face declarations Removed duplicate font family declarations Established single source of truth for typography Apply to custom.css } 2. Improved Font Fallbacks Enhanced System Font Stack: Apply to custom.css } Added modern system font stack Improved cross-platform consistency Enhanced performance during font loading 3. Heading Hierarchy Optimization Improved Visual Hierarchy: Apply to custom.css } Increased size difference between h1, h2, and h3 Improved line heights for better readability Enhanced visual scanning of content structure 4. Font Family Cleanup Removed font family declarations from: Individual component files Inline styles Component-specific CSS Theme configuration files Testing Instructions Font Consistency: Verify all text uses Inter font Check for any remaining inline font declarations Test font loading across all pages Font Fallbacks: Test with Inter font disabled Verify system font fallbacks on different platforms Check font rendering across browsers Heading Hierarchy: Verify clear visual distinction between heading levels Check content scanning experience Test responsive behavior of heading sizes Performance: Verify font loading optimization Check for any duplicate font declarations Test page load performance Review Checklist [ ] Verify all font declarations are removed from components [ ] Test font fallbacks across different platforms [ ] Check heading size hierarchy across all pages [ ] Verify content scanning experience [ ] Test responsive behavior [ ] Check accessibility standards [ ] Verify page load performance * Shadcn UI Theme Variables Implementation from Design System Overview This PR implements the design system's color palette and theme variables into the Shadcn UI configuration, ensuring consistent styling across the documentation site. Key Changes 1. Theme Variables Implementation src/css/custom.css: Added design system color variables for both light and dark themes Implemented proper HSL color values for all Shadcn UI components Added smooth transitions between theme states Configured proper color contrast ratios 2. Color Palette Integration Apply to custom.css } 3. Component Updates src/components/ui/button.jsx: Updated to use new theme variables Ensured proper color application across variants Added smooth transitions for state changes src/components/ui/theme-switcher.jsx: Updated to handle new theme variables Improved theme transition handling Added proper icon color transitions Testing Instructions Theme Variables: Verify all color variables match design system Check color contrast ratios Test transitions between themes Component Styling: Verify components use correct theme variables Check hover and active states Test in both light and dark modes Accessibility: Verify proper color contrast Test focus states Check text readability Review Checklist [ ] Verify all color variables match design system [ ] Test color transitions between themes [ ] Check component styling in both themes [ ] Verify accessibility standards [ ] Test responsive behavior [ ] Ensure consistent color application --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Enes Aldemir <88285759+spenes@users.noreply.github.com> Co-authored-by: Oguzhan Unlu <oguzhan@snowplowanalytics.com> Co-authored-by: Jethro Nederhof <jethro.nederhof@snowplowanalytics.com> Co-authored-by: John Reid <john.reid@snowplowanalytics.com> Co-authored-by: Peter Perlepes <p.perlepes@gmail.com> Co-authored-by: Greg Leonard <45019882+greg-el@users.noreply.github.com> Co-authored-by: Miranda Wilson <miranda@snowplow.io> Co-authored-by: agnessnowplow <95634439+agnessnowplow@users.noreply.github.com> Co-authored-by: Remi Adeleye <remi.adeleye@tastytrade.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Overview
This PR implements the design system's color palette and theme variables into the Shadcn UI configuration, ensuring consistent styling across the documentation site.
Key Changes
1. Theme Variables Implementation
src/css/custom.css:2. Color Palette Integration
3. Check only these Component Updates
src/components/ui/button.jsx:src/components/ui/theme-switcher.jsx:Testing Instructions
Theme Variables:
Component Styling:
Accessibility:
test page:
/tailwind-test
Review Checklist